import { defineComponent } from 'vue'
import useGameDataStore from '@/store/gameData'
import GameMap from './components/GameMap'
import CacheArea from './components/CacheArea'
import RemoveArea from './components/RemoveArea'

export default defineComponent({
  name: 'App',
  setup() {
    const gameDataStore = useGameDataStore()
    const { initGame, removeCacheAreaCard, shuffleMap } = gameDataStore
    /* render 函数 */
    return () => {
      return (
        <div class="flex flex-col justify-center items-center">
          <div class="text-5xl">牛了个牛</div>
          <div class="w-96 mt-2">
            <GameMap />
          </div>
          <RemoveArea />
          <CacheArea />
          <div class="mt-5">
            <a-button onClick={initGame}>重新开始</a-button>
            <a-button onClick={removeCacheAreaCard}>移出</a-button>
            <a-button onClick={shuffleMap}>洗牌</a-button>
          </div>
        </div>
      )
    }
  }
})
